<template>
	<view class="">
		<view class="is-bg-blue has-pdt-30">
			<view class="do-top has-pdlr-20 s-row-flex">
				<view class="is-col-8 is-left" @tap="timeUp">
					<uni-icons type="arrowleft" color="#FFFFFF" size="28"></uni-icons>
				</view>
				<view class="is-col-8 is-size-18 is-center">买币订单</view>
				<view class="is-col-8 is-right"></view>
			</view>
			<view class="do-top has-pdlr-20">
				<view class="is-size-20 is-bold has-floatr " v-show="showok">
					<image class="is-img-inline clockbox" src="../../static/imgs/clock.png" mode=""></image>
					<uni-countdown :show-day="false" :hour="0" :minute="minute" borderColor="#007AFF" splitorColor="#FFFFFF" backgroundColor="#007AFF" :second="0" :reset="reset" @timeup="timeUp"></uni-countdown>
				</view>
				<view class="is-size-25">
					{{showok ? '等待对方付款' : '收款信息'}}
				</view>
				<view class="is-size-14">
					{{showok ? '若已收到付款，请及时完成交易' : ''}}
				</view>
			</view>
		</view>
		<view class="orderbox">
			<view class="is-blod has-pdb-8">
				订单信息
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					订单号
				</view>
				<view class="is-col-16 is-right">
					{{order_no}}
				</view>
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					交易数量
				</view>
				<view class="is-col-16 is-right">
					{{total_fee_true}}DC
				</view>
			</view>
		</view>
		<view class="bankbox">
			<view class="is-blod has-pdb-8">
				收款信息
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					{{ma_type_tit}}
				</view>
				<view class="is-col-16 is-right">
					{{ma_name}}({{ma_userno}})
				</view>
			</view>
		</view>
		<view class="bankbox">
			<view class="s-row has-pdtb-12">
				<view class="is-col-8 is-blod">
					{{showok ? '待收款' : '收款'}}
				</view>
				<view class="is-col-16 is-size-25 is-right is-blue-color">
					￥{{total_fee_true}}
				</view>
			</view>
			<view class="is-size-14 is-right is-red-color" v-show="showok">
				<view class="is-right">如实际收款金额与订单金额不符</view>
				<view class="is-right">请勿点击下方按纽</view>
			</view>
			<view class="is-blue has-pd-10 is-center" v-show="showok">
				恶意拖延放币奖遭到系统惩罚！
			</view>
		</view>
		<view class="has-pdlr-20 has-pdt-15" v-show="showback">
			 <button @click="grabback" type="warn">未收到款，解冻资金</button>
		</view>
		<view class="has-pdlr-20 has-pdt-15" v-show="showok">
			<button @click="grabok" type="primary">已收款，确认放币</button>
		</view>
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>

<script>
	var _self;
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue";
	export default {
		components: {
			uniCountdown,
			uniIcons
		},
		data() {
			return {
				foxtoken:'',
				minute: 0,
				reset: false,
				id:0,
				order_no:'',
				total_fee_true:'',
				ma_type_tit:'',
				ma_name:'',
				ma_userno:'',
				showback:0,
				showok:0
			}
		},
		onLoad(options) {
			_self = this;
			this.id = options.id;
			if(options.showback){
				this.showback = options.showback;
			}
			let info = this.service.getfox();
			if(info[0]){
				this.foxtoken = info[0]['foxtoken'];
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_grabinfo',
					method:'POST',
					data: {
						id:this.id,
						user_key:this.foxtoken
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success: res => {    
						var foxmsg = res.data;
						// console.log(foxmsg)
						if (foxmsg.code == 200) {  
							_self.order_no = foxmsg.data.list.order_no;
							_self.total_fee_true = foxmsg.data.list.total_fee_true;
							_self.ma_type_tit = foxmsg.data.list.ma_type_tit;
							_self.reset = !this.reset;
							// _self.minute = 10000000;
							_self.minute = foxmsg.data.list.time;
							_self.ma_name = foxmsg.data.list.ma['ma_name'];
							_self.ma_userno = foxmsg.data.list.ma['ma_userno'];
							if(foxmsg.data.list.grab_stauts == 0){
								if(this.showback){
									this.showok = 0;
								}else{
									this.showok = 1;
								}
							}else if(foxmsg.data.list.grab_stauts == 1){
								this.showok = 0;
								this.showback = 0;
							}else if(foxmsg.data.list.grab_stauts == 2){
								this.showok = 0;
								this.showback = 0;
							}
						}
					}                    
				});
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
		},
		methods:{
			timeUp(){
				uni.navigateBack({
				    delta: 1
				});
			},
			grabok(){
				let id = this.id;
				this.$showModal({
				    title: '提示',
				    content: '一旦操作无法回退，您确认收到款了么？',
					cancelText:'放弃',
					confirmText:'是的，已收到',
				    success: function (res) {
				        if (res.confirm) {
				            uni.request({
				            	url: _self.service.FOX_URL + 'diamond/grab_ok',
				            	method:'POST',
				            	data: {
				            		user_key: _self.foxtoken,
				            		grab_id: id
				            	},
				            	dataType:'json',
				            	header:{
				            		'content-type':'application/x-www-form-urlencoded',
				            	},
				            	success: res => {
				            		var rest = res.data;
									// console.log(rest)
				            		if(rest.status == 'success'){
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
										setTimeout(function() {
										    uni.redirectTo({
										    	url:'order_ing'
										    })
										}, 1000)
				            		}else{
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
				            		}
				            	}
				            })
				        }
				    }
				});
			},
			grabback(){
				let id = this.id;
				this.$showModal({
				    title: '提示',
				    content: '恶意操作封锁帐户，您确认未收到款么？',
					cancelText:'放弃',
					confirmText:'是的，未收到',
				    success: function (res) {
				        if (res.confirm) {
				            uni.request({
				            	url: _self.service.FOX_URL + 'diamond/grabback_ok',
				            	method:'POST',
				            	data: {
				            		user_key: _self.foxtoken,
				            		grab_id: id
				            	},
				            	dataType:'json',
				            	header:{
				            		'content-type':'application/x-www-form-urlencoded',
				            	},
				            	success: res => {
				            		var rest = res.data;
									// console.log(rest)
				            		if(rest.status == 'success'){
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
										setTimeout(function() {
										    uni.navigateTo({
										    	url:'/pages/index/index'
										    })
										}, 1000)
				            		}else{
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
				            		}
				            	}
				            })
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.do-top{
		background-color: #007AFF;
		color:#fff;
		padding:20rpx 0;
	}
	.clockbox {margin:8upx;background:#F0AD4E;width:52upx;height: 52upx;border-radius: 100%;}
	.orderbox{
		padding:20upx;
		border-bottom: 16upx solid #F0F0F0;
	}
	.bankbox{
		padding:20upx;
		border-bottom: 6upx solid #F0F0F0;
	}
</style>
